<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>WePY | 小程序组件化开发框架</title>
    <meta name=keywords content="WePY, 小程序, 组件化, ES6, ES7, Promise">
    <meta name="description" content="小程序组件化开发框架">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- favicon.ico in the root directory -->
    <link rel="stylesheet" href="./css/donate.css">
    <meta property="og:title" content="WePy 小程序组件化开发框架">
</head>

<body class="shown">
    <div class="container-wrap" id="app">
        <div class="container">
            <div class="header">
                <div class="header-pattern">
                    <div class="header">
                        <div class="header__inner">
                            <a class="logo" href="/">
                                <span class="logo__icon"></span>
                                <div class="logo_text">
                                    <span class="logo__title">WePY</span>
                                    <span class="logo__description">
                                        <span> </span>帮你快速开发小程序</span>
                                </div>
                            </a>

                            <div class="nav">
                                <a class="nav__item nav__item--home" href="./index.html">首页</a>
                                <a class="nav__item nav__item--document" target="_blank" href="./document.html">使用手册</a>
                                <a class="nav__item nav__item--api" target="_blank" href="./document.html#/api">API 说明</a>
                                <a class="nav__item nav__item--logs" target="_blank" href="./document.html#/changelog">版本日志</a>
                                <a class="nav__item nav__item--donate" href="./donate.html">Donate</a>
                            </div>

                            <div class="shares">
                                <ul class="social-links">
                                    <li class="social-link social-link--wx tooltip tooltip--indis">
                                        <a href="#" @mouseenter="wxEnter"></a>
                                    </li>
                                    <li class="social-link social-link--gh">
                                        <a href="https://github.com/wepyjs/wepy" target="_blank"></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="tagline">
                        <h2 class="tagline__title">欢迎捐赠 WePY</h2>
                    </div>

                    <div class="actions">

                        <div class="action">
                            <img src="https://raw.githubusercontent.com/wepyjs/wepy/master/docs/img/donate/wechat.png" />
                            <h2>微信捐赠WePY</h2>
                        </div>

                        <div class="action">
                            <img src="https://raw.githubusercontent.com/wepyjs/wepy/master/docs/img/donate/alipay.png" />
                            <h2>支付宝捐赠WePY</h2>

                        </div>

                    </div>

                </div>
            </div>


            <div class="slides">

                <div class="slide slide--two">
                    <div class="slide__inner">
                        <div class="sections">

                            <h2 class="section--title">捐赠名单</h2>

                            <div class="section ">
                                <div class="section__content">
                                    <table class="table border stripe responsive">
                                        <thead>
                                            <tr>
                                                <th style="width: 130px;">时间</th>
                                                <th style="width: 200px;">姓名</th>
                                                <th style="width: 150px;">金额</th>
                                                <th>备注</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="item in donates">
                                                <td data-th="时间">{{item.date}}</td>
                                                <td data-th="姓名">{{item.name}}</td>
                                                <td data-th="金额">￥ {{item.amount}}</td>
                                                <td data-th="备注">{{item.desc}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
                <div class="slide slide--three">
                    <div class="slide__inner">
                      <div class="slide__text">
                        <h2>已经捐赠?</h2>
                        <div class="text">
                          <p>
                             非常感谢您的关注与支持! <br />捐赠名单默认不会在网站上显示，
                             如您希望显示可点击现方按钮, 进入 PR 页面完善信息，并发布 pull request，网站会不定期更新。
                           </p>
                        </div>
                        <a href="https://github.com/wepyjs/wepy/edit/master/docs/data/donate.json" class="button button--pr">+ 添加捐赠信息</a>
                      </div>
                    </div>
                  </div>
            </div>
        </div>
        <div class="modal-container" :class="isQrShow ? 'active' : ''" @click="modalClick">
            <div class="qr-modal">
                <div style="padding: 10px;">
                    我们是完全开源的，任何人都可以免费投稿。WePY 交流群已满500人，请加 gcaufy_helper 好友或者扫码加好友，验证回复 wepy 按照指引进群。
                </div>
                <img style="width: 200px;" src="img/qrcode.png">
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-inner">
            <div class="footer--copyright">
                Copyright © 2017 THL A29 Limited a Tencent company All rights reserved
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isQrShow: false,
                donates: []
            },
            methods: {
                wxEnter: function () {
                    this.isQrShow = true
                },
                modalClick: function () {
                    this.isQrShow = false
                }
            },
            created: function () {
                var self = this;
                axios.get('./data/donate.json').then(function (res) {
                    if (res && res.data) {
                      self.donates = res.data.donates;
                    }
                });
            }
        })
    </script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?14c98a4c2ac48bfa7a4c6e9bf797d125";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</body>

</html>
